<template>
<x-main>
  <x-preview title="押金信息" :data="depositInfo" :columns="col"></x-preview>

  <view class="x-box">
    <x-box title="押金处理">
      <x-input label="退押金额" :max="depositInfo.orderDeposit" v-model="state.money" :placeholder="`请填写，最高不超过${depositInfo.orderDeposit || 0}`">
        <template #suffix>元</template>
      </x-input>
      <x-input label="退押说明" v-model="state.remark" :placeholder="`${depositInfo.depositType == DEPOSIT.FREEZE ? '请填写扣款说明' : '请填写退押说明'}`"></x-input>
      <x-uploader title="附件" v-model="state.files" :limit="6" :required="false"></x-uploader>
    </x-box>
  </view>
</x-main>

  <x-bottom>
    <view class="notice">注：若押金扣款失败，重新发起扣款需保存金额一致，若需要变更金额请先取消扣款</view>
    <view class="x-space-between">
<!--      <view @click="onCancel" class="x-btn x-btn-plain-primary btn">取消扣款</view>-->
      <view v-if="depositInfo.depositType == DEPOSIT.NORMAL" @click="onDepositUnfreeze" class="x-full x-btn x-btn-primary">发起退押</view>
      <view v-else @click="onDepositPay" class="x-full x-btn x-btn-primary">发起扣款</view>
    </view>
<!--    <view v-if="depositInfo.depositType == DEPOSIT.FREE" class="x-btn x-btn-primary">发起退押</view>-->
  </x-bottom>
</template>

<!-- 押金处理 -->
<script setup>
import XPreview from '@/components/lib/preview'
import store from '@/stores/modules/deposit';
import {storeToRefs} from "pinia";
import {reactive, ref} from 'vue';
import {onLoad} from "@dcloudio/uni-app";
const DepositStore = store();
const {depositInfo} = storeToRefs(DepositStore);
import {Msg, Constant, Helper} from 'core';
const col = ref([
  {label: "押金金额", field: "orderDeposit", suffix: "元"},
  {label: "押金类型", field: "depositType", format: (c, data) => {
      return DepositStore.formatType(data.depositType);
    }},
  {label: "扣款金额", field: "refundAmount", format: (c, d) => {
      if(! Helper.empty(d) && ! Helper.empty(d.refundAmount)) {
        let str = d.refundAmount + "元";
        // if(d.deductDeposit > 0) {
        //   str += d.waitDeductDeposit ? "(扣款中)" : "(扣款成功)"
        // }
        return str;
      }
      return "-";
    }},
  {label: "押金付款日期", field: "payTime"},
  {label: "合约到期日期", field: "leaseEndDate"},
  {label: "用户姓名", field: "ownerName"},
  {label: "用户手机号", field: "ownerPhone"},
]);
const state = reactive({
  money: "",
  remark: "",
  files: [],
})
const orderNo = ref("");
onLoad((option) => {
  orderNo.value = option.orderNo;
  DepositStore.getInfo(orderNo.value);
})

const onDepositPay = async () => {
  if(state.money > depositInfo.value.orderDeposit) {
    Msg.error("扣款金额不得超过押金金额,当前押金剩余可扣款金额：" + depositInfo.value.orderDeposit + "元");
    return;
  }

  if(Helper.empty(state.remark)) {
    Msg.error("请填写扣款说明");
    return;
  }

  let isOk = false;
  if(depositInfo.value.depositType == Constant.DEPOSIT.FREE) {
    isOk = await DepositStore.withhold(orderNo.value, state.money, state.remark, state.files);
  } else if(depositInfo.value.depositType == Constant.DEPOSIT.FREEZE) {
    isOk = await DepositStore.payAuth(orderNo.value, state.money, state.remark, state.files);
  } else {
    Msg.error("非法押金类型，无法扣款")
  }

  if(isOk) {
    uni.navigateBack();
  }
}

const onCancel = async () => {
  await DepositStore.depositPayCancel(orderNo.value);
}

const onDepositUnfreeze = () => {
  Msg.confirm("发起后，将执行退押操作，且不可撤销。\n" +
      "退押后，未到期账单将终止。\n" +
      "确定发起退押吗？", {title: "发起退押提醒"}).then(async _ => {
    // await
  })
}

</script>

<style scoped lang="less">
.x-box {
  background-color: #fff;
  margin-top: 30rpx;
}

.btn {
  width: 48%
}

.notice {
  font-size: 24rpx;color: red;padding: 20rpx 0;box-sizing: border-box
}
</style>
